<template>
    <div class="fileManage">
        <div>
            <SearchBox :formItemList="formItemList" @search="handleSearch" ref="SearchBoxName" @resetForm="resetForm">
            </SearchBox>
        </div>
        <div class="content-top">
            <div class="top-header">
                <div>
                    <span class="line"></span>
                    <span class="top-title">软件资源运行状态</span>
                </div>
                <div class="right-btns">
                <ul>
                    <li v-for="(item,index) in btns" :key="index">{{item}}</li>
                </ul>
            </div>
            </div> 
        </div>
        <div class="content-bottom">
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,nextTick} from 'vue'
// 导入搜索组件
import SearchBox from '@/components/SearchBox.vue'
// 搜索组件相关数据
const SearchBoxName = ref()
const formItemList = ref ( [
        {
		label: "用户名",
		type: "input",
		param: "stationName",
	},
	{
		label: "所属部门",
		type: "select",
		selectOptions: [
		{
			value: 'all',
			label: '全部',
		},
		{
			value: '1',
			label: '选项1',
		},
		{
			value: '2',
			label: '选项2',
		},
		{
			value: '3',
			label: '选项3',
		},
		{
			value: '4',
			label: '选项4',
		},
		],
		// 这个是存放下拉框的默认值
		defaultSelect: '全部',
		param: "all",
		multiple: false,
	},
	{
		label: "创建时间",
		type: "daterange",
		param: "timerange",
		startPlaceholder: "开始时间",
		endPlaceholder: "结束时间",
	},
	])
	// 搜索
const handleSearch = ()=>{
		console.log(SearchBoxName.value?.formInline    
,'点击了搜索按钮')
	}
	const resetForm = ()=>{
		SearchBoxName.value?.resetForm()
	}
// 右侧按钮
const  btns = ref(['CPU资源','内存资源','存储资源'])
</script>

<style lang="scss" scoped>
.fileManage {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    .content-top {
        width: 100%;
        height: 500px;
        border: 1px solid #409eff;
        border-radius: 7px;
        .top-header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            border-bottom:1px solid  rgb(236, 232, 232);
            padding: 0 10px;
            .line {
                display: inline-block;
                position: relative;
                top: 2px;
                width: 5px;
                height: 17px;
                line-height: 20px;
                background: #409eff;
                margin-right: 5px;
            }
            .top-title {
                display: inline-block;
                font-size: 16px;
                font-weight: 700;
            }
            .right-btns {
                width: 400px;
                background-color: #eef3fe;
                ul {
                    display: flex;
                    li {
                        padding: 8px;
                    }
                }
                
            }
        }
    }
    .content-bottom {
        width: 100%;
        height: 500px;
        border: 1px solid #409eff;
        border-radius: 7px;
        margin-top: 15px;
        background-color: #fff;
    }
}
</style>